<template>
    <fragment>
        <template v-for="menu in menulist">
            <el-submenu :index="menu.path" :key="menu.path" v-if="menu.children.length>0">
                <template slot="title">
                    <i :class="menu.icon"></i>
                    <span style="font-size:15px;font-weight:600;" slot="title">{{menu.label}}</span>
                </template>
               <menu-item :menulist="menu.children"></menu-item>
            </el-submenu>
            <el-menu-item  v-else :index="menu.path" :key="menu.path" @click="selectMenuA(menu)">
                <i :class="menu.icon"></i>
                <span slot="title">{{menu.label}}</span>
            </el-menu-item>
        </template>

    </fragment>

</template>

<script>
    import {
        mapActions
    } from 'vuex';
    export default {
        name: "MenuItem",
        props:['menulist'],
        methods:{
            ...mapActions({
                // 关联到store中的方法
                selectMenu:"menustore/selectMenuAction",
            }),
            selectMenuA(item){
                //查找是否打开当前tab  并且替换或者激活"
                this.selectMenu({item:item});
                //路由跳转到点击的菜单路由
                this.$router.push({name:item.name})
            }
        }
    }
</script>

<style scoped>

</style>